<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="75px" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getSchoolItem'></school>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="商品名称" prop="goodsId">
                            <el-select v-model="query.goodsId" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in goodsList" :key="item.pId" :label="item.sName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>  -->
                    <el-col :span="8">
                        <el-form-item label="月份" prop="timeDate">
                            <el-date-picker
                                :editable='false'
                                :clearable='false'
                                v-model="query.timeDate"
                                type="month"
                                style="width:100%"
                                placeholder="请选择">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportTable()">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" v-loading="loading" style="width: 100%" @expand='expandChange' >
                <el-table-column type="expand" prop="children">
                    <template scope="scope">
                        <child-school-table :scope="scope" :childData='childData'></child-school-table>
                    </template>
                </el-table-column>
                <el-table-column label="学校名称">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="经销商名称">
                    <template scope="scope">
                        <span>{{scope.row.orgUserName  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称">
                    <template scope="scope">
                        <span>全部商品</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="订单总量（条）">
                    <template scope="scope">
                        <span>{{scope.row.totalNum  | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="总销售额（元）">
                    <template scope="scope">
                        <span>{{scope.row.totalMoney  | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import childSchoolTable from './comps/childSchoolTable';
    import school from 'components/SchoolClasss/school';
    import { pageSchoolStatistics, queryGoodsName} from 'api/serviceManage';
    import { mapGetters, mapState, mapActions } from 'vuex';

    export default {
        name: 'schoolStatistics',
        components: { Levelbar, TableLayout, province, city, region, childSchoolTable, school},
        data() {
            return { 
                loading: true,  
                schoolList: [],
                goodsList: [],
                tableData: [],
                childData: {
                    date: ''
                },
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolId: '',
                    schoolName: '',
                    goodsId: '',
                    timeDate: new Date()
                }
            }
        },
        created() {
            this.queryGoodsNameFu();
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'token'
            ])
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            queryData() {

                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区id
                let fSchoolId = this.query.schoolId; // 学校id
                let fIncrementId = this.query.goodsId; // 服务ID 
                let date = this.query.timeDate==''?'':moment(this.query.timeDate).format('YYYY-MM'); // 查询的月份，如2017-10 

                this.loading = true;
                pageSchoolStatistics(
                    this.pageQuery.currentpage,
                    this.config.pageSize,
                    provinceId, // 省id
                    cityId, // 市id
                    areaId, // 区id
                    fSchoolId, // 学校id
                    fIncrementId, // 服务ID 
                    date // 查询的月份，如2017-10 
                    
                ).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
                
            },
            expandChange(row, expandedRows) {
                if (expandedRows) {
                    this.childData.date = this.query.timeDate==''?'':moment(this.query.timeDate).format('YYYY-MM');// 查询的月份，如2017-10
                }
            },

            exportTable() {
                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区id
                let fSchoolId = this.query.schoolId;  // 学校id
                let fIncrementId = this.query.goodsId; // 服务ID 
                let date = this.query.timeDate==''?'':moment(this.query.timeDate).format('YYYY-MM'); // 查询日期或查询的月份，如2017-10-31或2017-10
                let token = this.token; 

                // exportSchoolStatistics(
                //     provinceId, // 省id
                //     cityId, // 市id
                //     areaId, // 区id
                //     fSchoolId, // 学校id
                //     fIncrementId, // 服务ID 
                //     date, // 查询的月份，如2017-10  
                //     token
                // ).then(res => {
                //     this.loading = false;    
                window.location.href = `${LOCAL_API.cm}/payIncrementDetail/exportSchoolStatistics?provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&fSchoolId=${fSchoolId}&fIncrementId=${fIncrementId}&date=${date}&token=${token}`;           
                   
                // }).catch(() => {
                //     this.loading = false;
                // });
            },

            getSchoolItem(schoolId) {
                this.query.schoolId = schoolId;
            },

            // 获取商品列表
            queryGoodsNameFu() {
                queryGoodsName().then(response => {
                    this.goodsList = [];
                    if (response.data.content) {
                        this.goodsList = response.data.content;
                    }
                    this.goodsList.unshift({ pId: '', sName: '请选择'});
                });
            }
        }

    }
</script>

<style lang="scss" scoped>

    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        .app-levelbar {
            height: 35px;
        }
        // .table-child {
        //     .el-table__expanded-cell {
        //         padding: 0;
        //     }
        // }
        
    }
</style>

